<template>
    <div>
        <div>
        <div class="ttop"> <van-nav-bar title="分类详情" left-text="返回" left-arrow  @click-left="onClickLeft"/>
        </div>
        <div class="bottom" style="font-size:0" v-html="data.content"></div>
        <div class="topic">
            <div class="head">专题推荐</div>
            <ul>
                <li v-for="item in recommendList" :key="item.id">
                    <img :src="item.scene_pic_url" alt="">
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
import {detailaction} from "@/api/topic";
    export default {
        data(){
            return{
                data:"",
                recommendList:""
            }
        },
        created(){
           detailaction({
                id:this.$route.query.id
            }).then(res=>{
                console.log(res);
                this.data=res.data;
                this.recommendList=res.recommendList
            })
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style lang="scss" scoped>
.ttop{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    height: 46px;
    z-index: 666;
}
.bottom{
    ::v-deep img{
        width: 100%;
    }
}
.head{
    background: #f4f4f4;
    font-size: .4rem;
    color: #999;
    padding: .4rem 0;
}
ul{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    li{
        width: 345px;
        height: 213px;
        img{
            width: 312px;
            height: 139px;
        }
    }
}
</style>